<template>
  <div class="tags" v-if="showTags">
      <draggable tag="ul" :list="tagsList">
          <li :class="{'active': isActive(item.path)}" :key="index" class="tags-li" v-for="(item,index) in tagsList" @contextmenu.prevent="RightClick($event, isActive(item.path),index)">
              <router-link :to="item.path" :class="{'tags-li-title':true,'active': isActive(item.path)}" :style="{'--bgcolor': bgcolor,'--forecolor':forecolor,'--actbgcolor':actbgcolor,'--actforecolor':actforecolor}">{{item.title}}</router-link>
              <span v-if="item.path != '/dashboard' && item.path != '/dashboardbis'" @click="closeTags(index)" class="tags-li-icon">
                  <i class="el-icon-close"></i>
              </span>
          </li>
      </draggable>
      <!--  <div class="tags-close-box">
          <el-dropdown @command="handleSwitchModel">
              <el-button size="mini" class="switchbtn">
                  切换模块
                  <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu size="small" slot="dropdown">
                  <el-dropdown-item :command="emitem.code" :key="index" v-for="(emitem,index) in bigmodels" :style="emitem.code==currentMod?'color:#f56c6c;':''">{{emitem.name}}</el-dropdown-item>
              </el-dropdown-menu>
          </el-dropdown>
        <el-dropdown @command="handleTags">
              <el-button size="mini">
                  标签选项
                  <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu size="small" slot="dropdown">
                  <el-dropdown-item command="other">关闭其他</el-dropdown-item>
                  <el-dropdown-item command="all">关闭所有</el-dropdown-item>
              </el-dropdown-menu>
          </el-dropdown>
      </div>-->
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components:{
      draggable
  },
  data() {
      return {
          tagsList: [],
          bgcolor: "#eeeeee",
          forecolor: "#8c8c8c",
          actbgcolor: "#ffffff",
          actforecolor: "#333333",
          CurrentID: 0,
          tagcount: 7,
          // bigmodels: [],
          // currentMod: "LIS"
      };
  },
  mounted() {
      this.initOption();
      this.$pub.lis310id = 1;
      this.$tool.removeSession("RptPageInfo");
      this.$bus.$on("closePathTags", (path) => {
          // 关闭单个指定pah，未知index的标签
          if (!path) return false;
          let index = this.tagsList.findIndex((item) => item.path == path);
          if(index > -1){
              this.closeTags(index);
          }
      });
  },
  methods: {
      initOption() {

          this.$tool
              .request({
                  url: "/ucent/dashboard",
                  method: "post",
                  data: {
                      action: "getOption",
                  },
              })
              .then((response) => {
                  this.tagcount = response.tagcount;
                  //  console.info("this.tagcount=="+this.tagcount);
                  // this.HisChange();
              });
      },
      //右键菜单
      RightClick(e, actflag, clickindex) {
          var that = this;
          this.$contextmenu({
              items: [
                  {
                      label: "修改背景色",
                      onClick: () => {
                          let myComponent = () => import("../rmcompents/tagsub/coloredit");
                          that.$rmDialog(
                              myComponent,
                              {
                                  title: "背景色设置",
                                  confirmBtnText: "确定",
                                  cancelBtnText: "取消",
                                  width: "300px",
                              },
                              { editcolor: actflag ? that.actbgcolor : that.bgcolor }
                          )
                              .then((e) => {
                                  if (e.editcolor) {
                                      if (actflag) {
                                          that.actbgcolor = e.editcolor;
                                          that.$tool.setLocalConfig("actbgcolor", e.editcolor);
                                      } else {
                                          that.bgcolor = e.editcolor;
                                          that.$tool.setLocalConfig("bgcolor", e.editcolor);
                                      }
                                  }
                              })
                              .catch(() => {});
                      },
                  },
                  {
                      label: "修改字颜色",
                      onClick: () => {
                          let myComponent = () => import("../rmcompents/tagsub/coloredit");
                          that.$rmDialog(
                              myComponent,
                              {
                                  title: "字体颜色设置",
                                  confirmBtnText: "确定",
                                  cancelBtnText: "取消",
                                  width: "300px",
                              },
                              { editcolor: actflag ? that.actforecolor : that.forecolor }
                          )
                              .then((e) => {
                                  if (e.editcolor) {
                                      if (actflag) {
                                          that.actforecolor = e.editcolor;
                                          that.$tool.setLocalConfig("actforecolor", e.editcolor);
                                      } else {
                                          that.forecolor = e.editcolor;
                                          that.$tool.setLocalConfig("forecolor", e.editcolor);
                                      }
                                  }
                              })
                              .catch(() => {});
                      },
                  },
                  {
                      label: "重置颜色",
                      onClick: () => {
                          if (actflag) {
                              that.$tool.removeLocalConfig("actbgcolor");
                              that.$tool.removeLocalConfig("actforecolor");
                              that.actbgcolor = "#ffffff";
                              that.actforecolor = "#333333";
                          } else {
                              that.$tool.removeLocalConfig("bgcolor");
                              that.$tool.removeLocalConfig("forecolor");
                              that.bgcolor = "#eeeeee";
                              that.forecolor = "#8c8c8c";
                          }
                      },
                  },
                  {
                      label: "关闭",
                      onClick: () => {
                          that.closeTags(clickindex);
                      },
                  },
              ],
              event,
              // x: e.clientX + 20,
              // y: e.clientY,
              customClass: "RightBack",
              zIndex: 999,
              minWidth: 50,
          });
      },
      isActive(path) {
          // if (path === this.$route.fullPath || path === this.$route.fullPath + "?id=" + this.CurrentID) return true;
          // else false;
          return path === this.$route.fullPath;
      },
      // 关闭单个标签
      closeTags(index) {
          if (this.tagsList[index].path == "/dashboard" || this.tagsList[index].path == "/dashboardbis") return;
          // if (this.tagsList.length == 1 && this.tagsList[0].path == "/dashboard") return;
          const delItem = this.tagsList.splice(index, 1)[0];
          const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
          this.$bus.$emit("closetag", delItem);
          if (item) {
              delItem.path === this.$route.fullPath && this.$router.push(item.path);
          } else {
              if (this.$tool.checkBis()) {
                  this.$router.push("/dashboardbis");
              } else {
                  this.$router.push("/");
              }
          }
      },
      // 关闭全部标签
      closeAll() {
          this.tagsList = [];
          if (this.$tool.checkBis()) {
              this.$router.push("/dashboardbis");
          } else {
              this.$router.push("/");
          }
      },
      // 关闭其他标签
      closeOther() {
          const curItem = this.tagsList.filter((item) => {
              return item.path === this.$route.fullPath;
          });
          this.tagsList = curItem;
      },
      // 设置标签
      setTags(route) {
          //var currentmenu = this.$tool.getSession("currentmenu");
          // var id = 0;
          // if (route.fullPath.indexOf("LIS310") > -1) {
          //     var pageinfo = JSON.parse(this.$tool.getSession("RptPageInfo"));
          //     if (pageinfo && pageinfo.length > 0) {
          //         id = pageinfo.length + 1;
          //     }
          // }
          const isExist = this.tagsList.some((item) => {
              return item.path === route.fullPath;
          });
          let newpath = route.fullPath;
          //console.log("settag", newpath);
          if (!isExist) {
              // console.info("this.tagsList.length =="+this.tagsList.length + " ===this.tagcount--"+this.tagcount);
              if (this.tagsList.length > this.tagcount ) {
                  let taginfo = this.tagsList.splice(1, 1);
                  var pageinfo = this.$tool.getSession("RptPageInfo");
                  if (pageinfo) {
                      pageinfo = JSON.parse(pageinfo);
                      if (pageinfo.length > 0 && taginfo.length > 0) {
                          //判断被挤掉的页面是不是LIS310，如果是的话，需要从已开报告单元列表中删除本页面
                          var index = pageinfo.findIndex((item) => item.path == taginfo[0].path);
                          if (index > -1) {
                              pageinfo.splice(index, 1);
                              this.$tool.setSession("RptPageInfo", JSON.stringify(pageinfo));
                          }
                      }
                  }
              }
              //var newpath = route.fullPath.indexOf("LIS310") > -1 ? "/LIS310?id=" + id : route.fullPath;
              // if (id > 0) {
              //     newpath = "/LIS310?id=" + id;
              //     this.CurrentID = id;
              // }
              this.tagsList.push({
                  title: route.meta.title,
                  path: newpath,
                  name: route.matched[1].components.default.name,
              });
          }
          // this.$tool.setSession("currenttag", newpath);
          this.$bus.$emit("tags", this.tagsList);
          //this.$bus.$emit("tagsChange", { path: newpath, list: this.tagsList });
      },
      handleTags(command) {
          command === "other" ? this.closeOther() : this.closeAll();
      },
      // handleSwitchModel(command) {
      //     this.currentMod = command;
      //     this.$tool.setLocalConfig("bigmodel", command);
      //     this.$bus.$emit("switchmodel", this.currentMod);
      // }
  },
  computed: {
      showTags() {
          return this.tagsList.length > 0;
      },
  },
  watch: {
      $route(newValue, oldValue) {
          //console.log("route", newValue, oldValue);
          let regcheck = this.$tool.getSession("noreg");
          if (newValue.fullPath != "/MNG116" && regcheck && regcheck === "1") {
              this.tagsList = [];
              if (this.$tool.checkBis()) {
                  this.$router.push("/dashboardbis");
              } else {
                  this.$router.push("/");
              }

              this.setTags(this.$route);
          } else {
              this.setTags(newValue);
          }
      },
  },
  created() {
      let that = this;
      let isbis = that.$tool.checkBis();
      if (isbis == "1") {
          if (that.tagsList.length == 0 || that.tagsList[0].path != "/dashboardbis") {
              that.tagsList.splice(0, 0, {
                  title: "首页",
                  path: "/dashboardbis",
                  name: "dashboardbis",
              });
          }
          // console.log("tagsList", that.tagsList);

          let regcheck = that.$tool.getSession("noreg");
          if (regcheck && regcheck === "1") {
              that.tagsList = [];
              that.$router.push("/dashboardbis");
          } else {
              that.setTags(that.$route);
          }
      } else {
          if (that.tagsList.length == 0 || that.tagsList[0].path != "/dashboard") {
              that.tagsList.splice(0, 0, {
                  title: "首页",
                  path: "/dashboard",
                  name: "dashboard",
              });
          }
          // console.log("tagsList", that.tagsList);

          let regcheck = that.$tool.getSession("noreg");
          if (regcheck && regcheck === "1") {
              that.tagsList = [];
              that.$router.push("/");
          } else {
              that.setTags(that.$route);
          }
      }

      // 监听关闭当前页面的标签页
      that.$bus.$on("close_current_tags", () => {
          for (let i = 0, len = that.tagsList.length; i < len; i++) {
              const item = that.tagsList[i];
              if (item.path === that.$route.fullPath) {
                  if (i < len - 1) {
                      that.$router.push(that.tagsList[i + 1].path);
                  } else if (i > 0) {
                      that.$router.push(that.tagsList[i - 1].path);
                  } else {
                      that.$router.push("/");
                  }
                  that.tagsList.splice(i, 1);
                  break;
              }
          }
      });

      that.$bus.$on("titlechange", (tobj) => {
          // console.log("tobj", tobj);
          if (tobj && tobj.path) {
              let cindex = that.tagsList.findIndex((m) => m.path == tobj.path);
              if (cindex >= 0) {
                  that.tagsList[cindex].title = tobj.title;
              }
          }
      });
      // that.bigmodels = that.$tool.getLocalConfig("bigmodellist");
      // that.currentMod = that.$tool.getLocalConfig("bigmodel");
      that.actforecolor = that.$tool.getLocalConfig("actforecolor") || "#333333";
      that.forecolor = that.$tool.getLocalConfig("forecolor") || "#8c8c8c";
      that.actbgcolor = that.$tool.getLocalConfig("actbgcolor") || "#ffffff";
      that.bgcolor = that.$tool.getLocalConfig("bgcolor") || "#eeeeee";
  },
  beforeDestroy() {
      this.$bus.$off("close_current_tags");
      this.$bus.$off("titlechange");
      this.$bus.$off("close_current_tags");
  },
};
</script>


<style>
.tags {
  position: relative;
  height: 30px;
  overflow: hidden;
  padding-right: 120px;
  background-color: #efefef;
  background: -ms-linear-gradient(bottom, #efefef, #c5c5c5);
  background: -moz-linear-gradient(center bottom, #efefef 0%, #c5c5c5 100%);
  background: -o-linear-gradient(bottom, #efefef, #c5c5c5);
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #c5c5c5), color-stop(1, #efefef));
  background: linear-gradient(to top, #efefef, #c5c5c5);
}

.tags ul {
  box-sizing: border-box;
  width: 100%;
  padding-top: 5px;
  height: 25px;
}

.tags-li {
  float: left;
  list-style: none;
  cursor: pointer;
  height: 25px;
  vertical-align: middle;
  color: #666;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  position: relative;
}

.tags-li-title {
  position: relative;
  background: var(--bgcolor);
  padding: 6px 18px 6px 15px;
  float: left;
  text-decoration: none;
  color: var(--forecolor);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  border-radius: 5px 0 0 0;
  border-top: 1px solid #d0d0d0;
  font-size: 12px;
  line-height: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 15px;
}
.tags-li-title.active,
.tags-li-title.active::before,
.tags-li-title.active::after {
  background: var(--actbgcolor);
  color: var(--actforecolor);
  z-index: 3;
}
.tags-li-title:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -1px;
  right: -0.5em;
  bottom: 0;
  width: 1em;
  background: var(--bgcolor);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
  border-top: 1px solid #d0d0d0;
  transform: skew(20deg);
  -webkit-transform: skew(20deg);
  border-radius: 0 5px 0 0;
}
.tags-li-title:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -1px;
  left: -10px;
  bottom: 0;
  width: 1em;
  background: var(--bgcolor);
  border-left: 1px solid #d0d0d0;
  border-top: 1px solid #d0d0d0;
  transform: skew(165deg);
  -webkit-transform: skew(165deg);
  border-radius: 5px 0 0 0;
}

.tags-li-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  line-height: 17px;
  right: 14px;
  font-size: 7px;
  text-align: center;
  top: 6px;
  z-index: 3;
}
.tags-li-icon:hover {
  background: #e4a2a2;
  color: #fff;
}

.tags-close-box {
  position: absolute;
  right: 0px;
  top: 0;
  box-sizing: border-box;
  padding-top: 1px;
  text-align: center;
  height: 30px;
  box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

/* .switchbtn {
  color: #606266 !important;
  border-radius: 0 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75) !important;
  background-color: #f5f5f5 !important;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6) !important;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)) !important;
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6) !important;
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6) !important;
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6) !important;
  background-repeat: repeat-x !important;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0) !important;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf !important;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) !important;
  *background-color: #e6e6e6 !important;

  filter: progid: DXImageTransform.Microsoft.gradient(enabled=false) !important;
  border: 1px solid #bbbbbb !important;
  *border: 0 !important;
  border-bottom-color: #a2a2a2 !important;
  *margin-left: 0.3em !important;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
} */
.RightBack {
  background-color: #7c7c7c;
  color: #fff;
}
.RightBack div {
  color: #fff;
}
</style>
